<template>
  <section class="recommend">
    <header>
      <div class="banner">全部产品分类</div>
      <div class="main-recommend">
        <template v-for="item in mainRecommend">
          <el-link
            :key="item.id"
            :underline="false"
            type="default"
            @click="toGoodList(item.id, item.name, item.topid)"
            >{{ item.name | substr }}</el-link
          >
        </template>
      </div>
    </header>
    <main>
      <div class="categorys">
        <div class="category">
          <el-popover
            popper-class="popper-zf"
            placement="right-start"
            title="推荐产品"
            width="525"
            trigger="hover"
          >
            <div v-if="goodsType[0]">
              <template v-if="goodsType[0].length > 0">
                <template v-for="(item, index) in goodsType[0]">
                  <el-link
                    :underline="false"
                    :key="index"
                    @click="
                      toGoodList(item.firstCategory, item.firstCategoryName, 1)
                    "
                    >{{ item.firstCategoryName }}</el-link
                  >
                  <span
                    class="separator"
                    :key="'s' + index"
                    v-if="index < goodsType[0].length"
                  ></span>
                </template>
              </template>
            </div>
            <div
              class="category-item"
              slot="reference"
              @click="toGoodListByDeciveType(1)"
            >
              <span>搬运类</span>
              <template v-if="goodsType[0]">
                <span v-if="goodsType[0][0]" class="sub-category"
                  >/{{ goodsType[0][0].firstCategoryName | substrFC }}</span
                >
                <span v-if="goodsType[0][1]" class="sub-category"
                  >/{{ goodsType[0][1].firstCategoryName | substrFC }}</span
                >
              </template>
            </div>
          </el-popover>
        </div>
        <div class="category">
          <el-popover
            popper-class="popper-zf"
            placement="right-start"
            title="推荐产品"
            width="525"
            trigger="hover"
          >
            <div v-if="goodsType[1]">
              <template v-if="goodsType[1].length > 0">
                <template v-for="(item, index) in goodsType[1]">
                  <el-link
                    :underline="false"
                    :key="index"
                    @click="
                      toGoodList(item.firstCategory, item.firstCategoryName, 2)
                    "
                    >{{ item.firstCategoryName }}</el-link
                  >
                  <span
                    class="separator"
                    :key="'s' + index"
                    v-if="index < goodsType[1].length"
                  ></span>
                </template>
              </template>
            </div>
            <div
              class="category-item"
              slot="reference"
              @click="toGoodListByDeciveType(2)"
            >
              <span>输送类</span>
              <template v-if="goodsType[1]">
                <span v-if="goodsType[1][0]" class="sub-category"
                  >/{{ goodsType[1][0].firstCategoryName | substrFC }}</span
                >
                <span v-if="goodsType[1][1]" class="sub-category"
                  >/{{ goodsType[1][1].firstCategoryName | substrFC }}</span
                >
              </template>
            </div>
          </el-popover>
        </div>
        <div class="category">
          <el-popover
            popper-class="popper-zf"
            placement="right-start"
            title="推荐产品"
            width="525"
            trigger="hover"
          >
            <div v-if="goodsType[0]">
              <template v-if="goodsType[2].length > 0">
                <template v-for="(item, index) in goodsType[2]">
                  <el-link
                    :underline="false"
                    :key="index"
                    @click="
                      toGoodList(item.firstCategory, item.firstCategoryName, 3)
                    "
                    >{{ item.firstCategoryName }}</el-link
                  >
                  <span
                    class="separator"
                    :key="'s' + index"
                    v-if="index < goodsType[2].length"
                  ></span>
                </template>
              </template>
            </div>
            <div
              class="category-item"
              slot="reference"
              @click="toGoodListByDeciveType(3)"
            >
              <span>包装类</span>
              <template v-if="goodsType[2]">
                <span v-if="goodsType[2][0]" class="sub-category"
                  >/{{ goodsType[2][0].firstCategoryName | substrFC }}</span
                >
                <span v-if="goodsType[2][1]" class="sub-category"
                  >/{{ goodsType[2][1].firstCategoryName | substrFC }}</span
                >
              </template>
            </div>
          </el-popover>
        </div>
        <div class="category">
          <el-popover
            popper-class="popper-zf"
            placement="right-start"
            title="推荐产品"
            width="525"
            trigger="hover"
          >
            <div v-if="goodsType[3]">
              <template v-if="goodsType[3].length > 0">
                <template v-for="(item, index) in goodsType[3]">
                  <el-link
                    :underline="false"
                    :key="index"
                    @click="
                      toGoodList(item.firstCategory, item.firstCategoryName, 4)
                    "
                    >{{ item.firstCategoryName }}</el-link
                  >
                  <span
                    class="separator"
                    :key="'s' + index"
                    v-if="index < goodsType[3].length"
                  ></span>
                </template>
              </template>
            </div>
            <div
              class="category-item"
              slot="reference"
              @click="toGoodListByDeciveType(4)"
            >
              <span>其他类</span>
              <template v-if="goodsType[3]">
                <span v-if="goodsType[3][0]" class="sub-category"
                  >/{{ goodsType[3][0].firstCategoryName | substrFC }}</span
                >
                <span v-if="goodsType[3][1]" class="sub-category"
                  >/{{ goodsType[3][1].firstCategoryName | substrFC }}</span
                >
              </template>
            </div>
          </el-popover>
        </div>
        <div class="category">
          <el-popover
            popper-class="popper-zf"
            placement="right-start"
            title="推荐产品"
            width="525"
            trigger="hover"
          >
            <div v-if="goodsType[4]">
              <template v-if="goodsType[4].length > 0">
                <template v-for="(item, index) in goodsType[4]">
                  <el-link
                    :underline="false"
                    :key="index"
                    @click="
                      toGoodList(item.firstCategory, item.firstCategoryName, 5)
                    "
                    >{{ item.firstCategoryName }}</el-link
                  >
                  <span
                    class="separator"
                    :key="'s' + index"
                    v-if="index < goodsType[4].length"
                  ></span>
                </template>
              </template>
            </div>
            <div
              class="category-item"
              slot="reference"
              @click="toGoodListByType(2)"
            >
              <span>配件类</span>
              <template v-if="goodsType[4]">
                <span v-if="goodsType[4][0]" class="sub-category"
                  >/{{ goodsType[4][0].firstCategoryName | substrFC }}</span
                >
                <span v-if="goodsType[4][1]" class="sub-category"
                  >/{{ goodsType[4][1].firstCategoryName | substrFC }}</span
                >
              </template>
            </div>
          </el-popover>
        </div>
      </div>
      <div class="carousel">
        <el-carousel height="285px" direction="vertical">
          <el-carousel-item v-for="item in pictureList" :key="item.id">
            <el-link :underline="false" @click="toDetail(item.site)">
              <el-image
                style="width: 990px; height: 285px"
                :src="item.photo"
                fit="fit"
              ></el-image>
            </el-link>
          </el-carousel-item>
        </el-carousel>
      </div>
    </main>
  </section>
</template>

<script>
import {
  getModelRecommend,
  getBannerList,
  getAllGoodsType,
} from "@/api/api.js";
export default {
  name: "ModelRecommend",
  data() {
    return {
      goodsType: [[], [], [], [], []], //商品分类
      mainRecommend: [], //主推
      pictureList: [], // 轮播图
    };
  },
  created() {
    this.getAllGoodsType();
    this.getModelRecommend();
    this.getBannerList();
  },
  methods: {
    getAllGoodsType() {
      getAllGoodsType({}).then((res) => {
        console.info("全部分类", res?.data);
        this.goodsType = res.data || [];
      });
    },
    getModelRecommend() {
      getModelRecommend({}).then((res) => {
        console.info("主推", res?.data?.mainRecommend);
        this.mainRecommend = res?.data?.mainRecommend;
      });
    },
    getBannerList() {
      getBannerList({ type: 2 }).then((res) => {
        console.info("轮播图", res);
        this.pictureList = res.data || [];
      });
    },
    toDetail(url) {
      window.open(url);
    },
    toGoodList(firstCategory, firstCategoryName, topid) {
      this.$store.dispatch("user/getGoodsList", {
        firstCategory,
        firstCategoryName,
        deviceType: topid,
      });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    toGoodListByDeciveType(deviceType) {
      this.$store.dispatch("user/getGoodsList", { deviceType });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    toGoodListByType(type) {
      this.$store.dispatch("user/getGoodsList", { type });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
  },
  filters: {
    substr: function(value) {
      if (value.length > 6) {
        value = value.substring(0, 5) + "…";
      }
      return value;
    },
    substrFC: function(value) {
      if (value.length > 5) {
        value = value.substring(0, 4) + "…";
      }
      return value;
    },
  },
};
</script>

<style lang="scss">
.popper-zf {
  margin-left: 0 !important;

  .el-popover__title {
    font-family: Microsoft YaHei;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
  }

  .el-link {
    line-height: 24px;
  }

  .separator {
    height: 16px;
    border-left: 1px solid #ebeef5;
    margin: 0 15px;
  }
}
</style>
<style lang="scss" scoped>
$left-width: 230px;

.recommend {
  height: 322px;
  overflow: hidden;

  header {
    height: 37px;
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: center;

    .banner {
      width: $left-width;
      background: #3378ff;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      line-height: 37px;
    }

    .main-recommend {
      width: calc(100% - #{$left-width});
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 2px solid #3378ff;

      ::v-deep .el-link {
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 21px;
        color: #303133;
        width: calc(100% / 7);
      }
    }
  }
  main {
    height: calc(100% - 37px);
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: center;

    .categorys {
      width: $left-width;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;

      .category {
        width: 100%;
        height: calc(100% / 5);
        color: #ffffff;
        background: #777777;
        font-weight: bold;
        font-size: 14px;
        line-height: 18px;

        .category-item {
          padding: 0 14px;
          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;

          .sub-category {
            color: #bbbbbb;
            margin-left: 5px;
          }
          .sub-category:first-child {
            margin-left: 10px;
          }
        }
      }
      .category:not(:first-child) {
        border-top: 0.5px solid #bbbbbb;
      }
    }

    .carousel {
      width: calc(100% - #{$left-width});
      height: 100%;
    }
  }
}
</style>
